Advanced CSS3 and HTML5

Introduction

In the previous lesson, you created basic Web apps with jQuery Mobile. Now you know how to use the basic building blocks to create a mobile site that works well. What's missing, though, is style.

Unlike "normal" Web pages, when it comes to creating jQuery Mobile pages, the CSS file is already built for us. It's huge. It's complex. And if we mess with it, the whole jQuery Mobile framework of interconnected JavaScript and CSS can easily become corrupt.

Does that mean that you're stuck with jQuery Mobile sites constrained to a few primary colors? Thankfully, no. You can define distinctive themes and colors for your jQuery site using a CSS generator resource called ThemeRoller. ThemeRoller is free and open source, although Adobe has bought it.

Defining custom themes in ThemeRoller

This isn't the first time that we've used an online resource to generate complex CSS. Back in Lesson 4 we used an online resource, the Ultimate CSS Gradient Generator, to generate linear and radial CSS3 gradient backgrounds.

Linear and radial CSS3 backgrounds

I'm reviewing our experience with the Ultimate CSS Gradient Generator for a couple of reasons. One is to note a pattern of finding online resources to save time and stress in creating complex CSS3. The other reason is that much of what we'll do when we create custom CSS for jQuery Mobile sites is to generate different background gradients for jQuery Mobile elements (including page, listview, content, header, and footer).

We'll also use Adobe Kuler again. Remember that online resource? We used it to create color schemes back in Lesson 3. I'll remind you of the basics of Kuler when we set up color swatches for our theme in Chapter 2 of this lesson.

I wanted to save an especially fun lesson for our final lesson. And ThemeRoller is fun. By the time we complete this lesson, your mobile site will be as distinctive and colorful as you want it to be!

How Themes and Swatches Work

Before we head over to the ThemeRoller site to create custom CSS, let's quickly review the relationship between themes and swatches in jQuery Mobile. The terminology is confusing, so let's sort through it:

• The huge CSS file that jQuery Mobile distributes has a built-in theme that supplies styling. That styling includes fonts, font sizes, border radii values, drop shadows, and other style elements. (Border radii values let you include rounded corners in your designs. And drop shadows are a design element that makes your page look three-dimensional.)
• The theme that comes with the CSS file has built-in color swatches. These are color schemes (in other words, sets of colors). There are only five of these pre-built color swatches: a, b, c, d, and e.
• You can apply a swatch to any element with the parameter data-theme="a" (or b, c, d, or e).

Themes actually have two parts. The global part defines fonts, border radii, and drop shadows no matter what color swatch you're using. And the swatch is the data-theme color set (a through e).

So when we head over to the jQuery Mobile site to define custom themes, we'll create global theme styling and define specific color swatches.

By the way, we aren't limited to five color swatches. You can create as many as 26 color swatches in ThemeRoller.

Supported Browsers

The jQuery Mobile ThemeRoller resource we'll use in this lesson works with the latest versions of desktop and laptop browsers. That means:

• Chrome
• Firefox
• Safari

Other browsers don't work reliably to generate themes. What about the current version of Internet Explorer? At this writing, the jQuery Mobile ThemeRoller site doesn't recommend using it.

If you haven't installed Chrome, Firefox, or Safari by now, this is the moment to do so. You can install Chrome from www.google.com/chrome, and you can install Firefox from http://www.mozilla.org/en-US/firefox/new/. (If you're a Windows user, it's possible for you to download Safari, but you may need to use an older version with fewer features than the ones that Mac users have.)

Using the Right ThemeRoller

To design custom themes for jQuery Mobile sites, launch your browser if it isn't already open, and head over to the ThemeRoller jQuery Mobile site at http://jquerymobile.com/themeroller.

Careful! Do not head over to the ThemeRoller jQuery UI site at jqueryui.com/themeroller. That site generates themes for jQuery widgets, like the slide-show jQuery widget we created in Lesson 10. (UI stands for user interface.) If you search for "ThemeRoller," you'll find links to this site at the top of the list, but it isn't what we want.

To add to the confusion, the two ThemeRoller sites look something alike. But if you see a page that starts "jQuery User Interface ThemeRoller," you've made a wrong turn. The themes you find at jqueryui.com/themeroller don't work with jQuery Mobile sites.

The jQuery ThemeRoller User site, which doesn't work with jQuery Mobile

By the way, are you wondering why we didn't explore themes when we created jQuery Mobile widgets in Lesson 10? The answer is that themes aren't essential for styling jQuery widgets. As we saw in Lesson 10, it wasn't hard to define our own CSS for a jQuery widget.

So double-check: You're at http://jquerymobile.com/themeroller, right? You should see a dialog box with the title "Welcome to ThemeRoller for jQuery Mobile." Click Get Rolling.

Getting rolling at the jQuery Mobile ThemeRoller site

Exploring the jQuery Mobile ThemeRoller Interface

The interface has four main regions:

• The panels on the left: Global, A, B, C, and "+" (the "+" symbol creates new color swatches). This is where you define global theme elements and specific color swatches.

Theme and swatch panels

• The preview pane on the right is where you see how your theme and swatches will look.

Preview pane

• The QuickSwatch/Kuler bar in the upper right has a small swatch bar with commonly used colors as well as links and tools to add new colors.

QuickSwatch/Kuler bar

• The bar at the top of the page controls how code generates for the CSS file you create with jQuery Mobile ThemeRoller. We'll walk through how to use these features in Chapter 4 of this lesson.

Tools for generating CSS code

We'll spend the bulk of this chapter in the left panel, defining themes and swatches and observing the effects in the preview pane. But first let's look at the QuickSwatch/Kuler bar.

Setting Up Swatch Colors

As I mentioned back in Lesson 3, Kuler is Adobe's online tool for generating color schemes. You can use the slimmed-down version of Kuler in the ThemeRoller for jQuery Mobile interface to get help generating your own color scheme.

Remember color schemes? You might want to jump back to Lesson 3 for a quick review. That's where we explored Kuler. I won't review all that here, but remember that we used Kuler to pick five colors that would be the base of our site's color scheme.

Even if you have a defined color scheme for your regular site, you might choose a different set of five colors for your mobile color scheme. Remember, mobile devices generally don't have the powerful backlighting that desktop and laptop computers have. And people often view mobile devices in bright light. So you might want a high-contrast color scheme for your mobile site.

To get help from Kuler, click the expand icon that's next to the Adobe Kuler swatches link in the QuickSwatch/Kuler bar.

Expanding the Kuler Swatches panel

Use the Search box in the Kuler panel to explore ideas for color scheme sets. Click on any color to add it to the easily accessible set of Recent Colors in the QuickSwatch/Kuler bar. You can select all five colors in any Kuler color scheme this way.

Choosing colors from a Kuler scheme

You can also close the Kuler panel and define colors using a color wheel or CSS hexadecimal values. Just click the colors link.

Defining colors from
a color wheel

With your color swatch bar loaded up with the colors you'll be using, you're ready to define global theme elements as well as a set of swatches. We'll do that in the next chapter.

Defining a Custom Global Theme

Remember, themes are composed of global elements as well as specific swatch color schemes. Here's the full set of global theme elements.

• Font Family: You define a font family just as you would in a non-jQuery Mobile site—by defining a first-choice font and then adding backup options, separated by commas for browsers who don't have your first-choice font.
• Active State: This isn't the same as the active state for a link, which displays the moment a user clicks a link. Instead, it displays the "on" style for elements that have on/off options. On/off buttons are beyond the scope of this course, but there's no harm in defining a color setting for them in case you add them in the future.
• Corner Radii: This term refers to the degree to which boxes have rounded corners. You define that setting sitewide, not for individual color swatches.
• Icon: This symbol appears in a listview (a navigation bar). The icon can be black or white, and it can be inside a disc (circle) or without a disc.
• Box Shadow: You're already familiar with box shadows, also known as drop shadows. You define box shadows globally, and they apply in all color swatches.

Defining Gradients

Update note: As of version 1.4.1, jQuery Mobile ThemeRoller dropped the ability to easily define gradients. To "re-enable" this feature, choose Version 1.3.2 from the Switch to Version drop-down menu at the top of the jQuery Mobile ThemeRoller menu bar.

Switch to Version 1.3.2 to easily define gradients.

Update Note: jQuery Mobile ThemeRoller is constantly evolving, and different versions provide more, or fewer options for defining gradient backgrounds for different elements. 

I mentioned that we would be generating CSS3 gradients as an integral part of creating custom themes. jQuery Mobile provides gradient generators in many panels. Since they work the same way in every panel, let's walk through how to use them.

When you define a background color in ThemeRoller, you have the option of making that background a gradient. But before you can see the gradient definition slider, you need to expand the Background swatch by clicking the "+" sign that's next to it.

Expanding a background color swatch

The color swatch will expand to show a Start button and an End button. Click Start. To define a start color, you can choose one from the color wheel, enter a hexadecimal value, or drag a color from the QuickSwatch/Kuler bar.

Defining a start color for a gradient background

Define an end color.

Defining an end color for a gradient background

Defining Global Theme Elements

As you define your global theme elements, you'll see them show up in all the visible swatch color preview panels on the right side of the ThemeRoller page. Among those elements, by the way, are fonts—the same set of fonts applies to your entire mobile site.

A Quick Note on Fonts

Earlier in the course, we explored Web fonts in detail. I'm not suggesting you need to review that, and we won't revisit the option of using downloadable Web fonts now. But if you want to revisit the basic concepts behind using fonts on the Web, you might find it helpful to review "Surveying and Selecting Web Fonts" in Lesson 4, Chapter 4.

Okay, with that said, follow these steps to define global theme elements:

1. Expand and use the Font Family field to define fonts. Separate fonts with commas and spaces.

Defining a font family

2. Expand and use the Active State tab to define how selected buttons appear. From left to right, the Text Shadow boxes define horizontal shadow dimension, vertical shadow dimension, and blur. All measurements are in pixels. The last box on the right defines the shadow color.

Defining an Active State display

3. Expand and use the Corner Radii tab to define the radius of rounded corners. Lower values result in squarer corners. A value of zero produces a completely square corner. Higher values result in rounded corners. If you watch the results in the preview section of the ThemeRoller page, you'll see that if your border radii values get too high, your boxes will look like ovals.
   
   By default, ThemeRoller defines these values in em spaces—the width of a standard letter "m"—to make them more adaptable to different device environments.

Defining corner radii

4. Expand and use the Icon tab to define black or white icons and to display or hide discs.

Defining black icons with hidden discs

5. Expand and use the Box Shadow tab to define the color and size of box shadows. This tab also lets you set the shadows' opacity, which means whether they're opaque, transparent, or somewhere in between. The box shadow applies to listviews.

Defining drop shadows and testing their effect on listviews

Defining Custom Swatch A

The global theme elements that we just set created some coherent styling that will apply in every color swatch. But we can vary the colors of different elements by defining specific color swatches . . . up to 26 of them!

To define a first color swatch, follow these steps:

1. Click on the A swatch tab to define a color scheme for elements to which a data-theme="a" applies.

Selecting the A swatch tab

2. Expand the Header/Footer Bar panel, and define the different elements of a header or footer bar. You're familiar with these elements by now: text color, text shadow, background, and border color. Remember that you can expand the background element to create a gradient.

Customizing swatch A

3. Now you're ready to start experimenting with other aspects of swatch element styling.

a. The most important one is Content Body because that will define the color for the main part of the page.

b. You can define link colors for each swatch. If you expand the Link Color box, you can define link colors for different states (regular, visited, active, and hovered).

c. The three button states (normal, hover, and pressed) will apply to buttons such as the Back button. These are beyond the scope of this course, but you can see the previews as you define them. You can test the hover and pressed button states by hovering over or pressing on a button in the preview area.

Previewing hover state for a button

Defining Additional Swatches

In order to have a set of color options, you'll want to create additional custom color swatches. How many do you need? Probably three; that gives you a nice set of color options. But as I mentioned, you can create up to 26.

If you want to make your second swatch (B) a variation on the colors you applied to swatch A, you might want to start by duplicating Swatch A. Do that by clicking Duplicate.

Duplicating the A swatch tab

The duplicated swatch doesn't become Swatch B. Instead, it goes at the end of the default swatches and becomes Swatch D. If you want to make the duplicate swatch into Swatch B, select Swatch B, and click Delete. Do that again for Swatch C, and what was Swatch D becomes Swatch B.

Deleting the default B and C swatches

On your own, edit the colors in the B swatch, and then create at least a C swatch as well. If you have any trouble, please post a message in the Discussion Area.

Once you've finished, please join me in Chapter 4 to download and apply the theme you just created.

Rolling a jQuery Mobile Theme

Creating a custom jQuery Mobile theme with custom color swatches was fun and easy, right? Downloading and applying the theme is the more technical part. But we'll walk through that step by step.

jQuery Mobile generates a CSS file that replaces the default one. We'll need to link to that replacement CSS file in our jQuery Mobile site.

We have two ways to do that. One is to save and store the theme at the jQuery Mobile site. But your CSS file will only be stored there for a month, so that isn't a solution if you intend to use the theme in your site for an extended period.

The second and more useful option is to download the CSS as a Zipped file.

Linking to a jQuery Mobile Custom Theme

To download the Zipped file, follow these steps:

1. Click Download theme zip file to download the files you need, so you can customize your theme.

Downloading a Zip file

2. The Download Theme dialog box appears. There's work to do here before you click the Download Zip button, so hold off on that a moment.
3. In the Theme Name box, type in the words my-custom-theme with a hyphen between each word and with no punctuation at the end. This file name matches the template code we're going to use to link to the CSS file.

Naming the theme

4. Select the last five lines of the <head> code content in the Download Theme dialog, and copy it by hitting CTRL + C (COMMAND + C if you're using a Mac). The current version of jQuery Mobile may well change by the time you read this, but at this moment the code is:

<meta name="viewport" content="width=device-width, initial-scale=1">   
<link rel="stylesheet" href="css/themes/my-custom-theme.css" />   
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile.structure-1.3.2.min.css" />    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>    
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script> 

Copying the <head> element HTML

5. Open your jQuery Mobile page in your code editor, and paste the copied code right before the close </head> tag. (Paste by hitting CTRL + V or COMMAND + V.)
6. Delete your previous links to the jQuery Mobile JavaScript and CSS files.

Replacing links to jQuery Mobile CSS and JavaScript

7. We're going to copy the CSS file that we just downloaded into the root folder for our website. So edit the path of that file from

<link rel="stylesheet" href="css/themes/my-custom-theme.css" />

to

<link rel="stylesheet" href="my-custom-theme.css" />

8. Now toggle back to the jQuery Mobile ThemeRoller site, and click Download Zip.
9. Extract the downloaded Zip file, and copy the file my-custom-theme.css into the root folder for your site.

That was a lot of steps! So let me walk through the process in a video:

Let's review what happened to connect our site to our custom theme.

We generated a Zip file, which included a CSS file that replaced the default jQuery Mobile CSS file with our own theme and color swatches. We downloaded that file (along with some other files we didn't need, like an index.html file that you could use to demonstrate how the theme looks).

We also grabbed five lines of code for the <head> element in our jQuery Mobile page. That code accomplished the following:

• The <meta name="viewport" content="width=device-width, initial-scale=1"> code forced devices to "report" a realistic viewport so that text and effects display at a useful size.

• The <link rel="stylesheet" href="css/themes/my-custom-theme.css" /> code links to the custom theme CSS file we created. However, because we're copying this file into the root folder for our site (which for most of us is a folder called "class" on the desktop), we stripped out the path, changing the code to: <link rel="stylesheet" href=" my-custom-theme.css" />

• The <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile.structure-1.3.2.min.css" /> code links to a version of the central CSS file. This version has CSS selectors that aren't part of the theme but are required for jQuery Mobile to work.
• The code <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> links to the latest version of jQuery.
• The code <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script> links to the latest version of jQuery Mobile. As the latest versions of the central CSS file and the jQuery and jQuery Mobile files change periodically, your copied code may be different.

The jQuery Mobile ThemeRoller site made this process pretty easy, but I thought it was important to walk through exactly what happened . . . as a matter of principle and to help you troubleshoot in case a step or two didn't go quite right.

Applying Data Themes

Are we ready to test our default theme yet? Not quite! Let's first make sure we have defined data-themes for elements.

Remember, in order to apply a color swatch to any element in a jQuery Mobile page, you need to define a data-theme for that element. If you don't define a data-theme, then data-theme="b" will apply to an element by default.

To define a custom data theme for any element, edit the HTML for the data-theme= parameters to apply the swatches you created in ThemeRoller. For example, if you created only two swatches, "a" and "b," apply one of those two to each data-theme.

You should have data-theme parameters added to elements throughout your site. Here's a bit of example code:

<div data-role="page" id="page" data-theme="a"> 
<div data-role="header">
<h1>Page One</h1>
</div>
<div data-role="content" data-theme="b">
<ul data-role="listview" data-inset="true" data-theme="c">
<li><a href="#page2">Page 2</a></li>
<li><a href="#page3">Page 3</a></li>
<li><a href="#page4">Page 4</a></li>
<li><a href="#page5">Page 5</a></li>
</ul>    
</div>
<div data-role="footer" >
<h4>Page Footer</h4>
</div>
</div>

Save your page, and open it in a browser window. Of course your content and style will differ from mine, but you should see the theme and swatch elements you defined and applied in your browser.

Testing a custom theme

Inspecting the CSS

By creating a custom theme at ThemeRoller, we generated our own CSS file for jQuery Mobile. As I alluded to in the previous section, the CSS file we generated complements the central CSS file for jQuery Mobile; it doesn't replace the central file. We're still linking to a file at the jQuery Mobile Central Distribution Network—one that has a filename something like jquery.mobile.structure-1.3.2.min.css. That file has some of the required CSS that makes our jQuery Mobile site work.

But a good chunk of the CSS that makes our jQuery Mobile site look and act the way it does is now saved in our own site. (And by the way, if you upload your site to a server, be sure to upload the my-custom-theme.css file along with your edited site.)

Since the section of the CSS that defines our jQuery Mobile theme is now in our own site folder, it's easy to open and inspect in a code editor. You might want to try doing that. The CSS isn't commented (in other words, the code doesn't include explanatory text). But there are "---" comment lines that separate your swatch definitions. You can locate those and at least inspect the code.

Inspecting custom theme code

Summary

"Themes" is a buzzword these days. If you use a WordPress template to generate a blog or a website, you pick a theme that provides color and page layout styling.

In some ways, the theme that comes with jQuery Mobile plays a similar role. It provides a set of five color swatches as well as default styling for pages, headers, footers, content areas, and listviews.

ThemeRoller for jQuery Mobile allows us to break out of the constraints of the default theme and the default swatch color schemes. By the time we finish defining custom fonts, custom border radii, custom shadows for our theme, and custom colors and gradient backgrounds for our swatches, we can say that our jQuery Mobile sites are one-of-a-kind websites rather than customized templates.

ThemeRoller for jQuery Mobile: Part of a Universe of Free Web Design Resources

This is our last lesson (sigh! Where did the time go?). So I want to note that ThemeRoller for jQuery Mobile ThemeRoller is part of an emerging—and rather amazing—community of resources that support those of us who are in do-it-yourself Web design.

One of the things I hope you've gotten from this course is an appreciation for how substantial and useful that set of free online resources is. If you think back to previous lessons, we've used a wide range of free resources . . . starting with HTML5 and CSS3! Other free resources include:

• Adobe Kuler for color schemes (Lesson 3)
• Web hosting from 000webhost.com (Lesson 3)
• Online validation sites to test our HTML and CSS for errors (Lesson 3)
• Google Fonts (Lesson 4)
• Downloadable tools that convert video from raw formats to native formats (Lesson 5)
• Form-handling resources (Lesson 7)
• A jQuery widget that helped us create a slide show (Lesson 10)
• jQuery Mobile (Lessons 11 and 12)
• ThemeRoller for jQuery Mobile (Lesson 12)

With the HTML5 and CSS3 skills you've picked up and strengthened through this course, your potential as a designer is unlimited. You can connect the HTML5 and CSS3 you craft with a universe of free resources that do everything from generate search boxes to provide custom fonts.

Let me emphasize this point: If you have a solid grounding in HTML5 and CSS3 (and you do!), you're in the best possible position to exploit that universe of resources.

So . . . go forth and do that!

Final Steps

Now that you've finished the last lesson, is there anything else to do? Yes, several things!

• Quiz, assignment, and FAQs: You still have a quiz for this lesson, as well as an assignment, so be sure to do these. Also, check out the FAQs for this lesson—you might find the answer to something you're wondering about here.
• Resources for further learning: If you haven't already checked out the Recommended Books and Resources, now would be a great time. When it comes to a topic like Advanced CSS3 and HTML5, there's always more to learn. To access these, just click the Resources link.
• Final exam: Here's the moment all those quizzes have been preparing you for—the cumulative final for this course. Let me give you a tip: Print the final before taking it so you can study and relieve any test anxiety you might have. (You can have the classroom open when you take the final too.) You only get one chance at the final, so you'll want to do your best. To access it, click the Completion link and then click Final Exam. Good luck!
• Course evaluation: I'd love to know what you thought of this course and if you have any suggestions for improvement. So please take some time, either before or after you take the final, to fill out a brief evaluation. I appreciate your feedback, and future students will too! You'll find the link to this by clicking Completion, and then clicking Evaluation.
• Discussion Area: The Discussion Area will be open for two more weeks after Lesson 12's release, so please feel free to stop by and ask any questions (except about the final exam) and share your thoughts.

Other Courses

If you enjoyed this course, here are a few other online courses you might be interested in:

Creating jQuery Mobile Sites With Dreamweaver

Learn to build mobile-friendly websites for smartphones and tablets. You'll use Dreamweaver's menus and panels to generate animated, interactive navigation elements that rely on the jQuery Mobile library of code.

Introduction to JavaScript

Why should you learn JavaScript? If you want to do Web development work, you need to know it. The vast majority of Web pages out there contain some JavaScript code. Along with CSS and HTML, it's essential for Web developers.

Introduction to PHP and MySQL

Learn how to create an interactive Web site, allowing visitors to post and retrieve information provided by you or your site's visitors. In this six-week online course, you'll create dynamic Web pages using the PHP programming language and the MySQL database server.